import SidebarItem from "./SideBarItem.tsx";

import icon from "../../assets/mylib.png"
import LoginBadge from "../commons/LoginBadge.tsx";


const SideBarStore = () => {

    return (

        <div id="sidebar" className="d-flex flex-column flex-shrink-0 p-3 sidebar shadow-sm">
            <ul className="nav nav-pills flex-column mb-auto">
                <strong id="text-items" className="h5 mt-1 mb-0 text-muted">Categories</strong>
                <hr/>
                <SidebarItem
                    href="#container-science"
                    iconSrc={icon}
                    title="Science"
                    badgeText={"8"}
                    isActive={true}
                />
                <SidebarItem
                    href="#container-math"
                    iconSrc={icon}
                    title="Math"
                    badgeText={"8"}
                    isActive={true}
                />
                <SidebarItem
                    href="#container-classics"
                    iconSrc={icon}
                    title="Classics"
                    badgeText={"8"}
                    isActive={true}
                />
                <SidebarItem
                    href="#container-studying"
                    iconSrc={icon}
                    title="Studying"
                    badgeText={"8"}
                    isActive={true}
                />
                <SidebarItem
                    href="#container-birds"
                    iconSrc={icon}
                    title="New"
                    badgeText={"8"}
                    isActive={true}
                />
            </ul>
            <LoginBadge/>


        </div>
    )
}

export default SideBarStore